<template>
  <div class="video_detail_container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="BaseInfo">
        <el-form
          label-position="left"
          label-width="80px"
          :model="videoForm"
          :rules="rules"
          ref="videoForm"
        >
          <el-row :gutter="80">
            <el-col :span="8">
              <el-form-item prop="name" label="名称：">
                <el-input v-model="videoForm.name" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="author" label="作者：">
                <el-input v-model="videoForm.author" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="category" label="类别：">
                <el-cascader
                  placeholder="请选择类别"
                  :options="categoryOptions"
                  :props="{ label: 'name', value: 'id' }"
                  v-model="videoForm.category"
                  @change="categoryChange"
                  filterable
                  clearable
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="coverImg" label="封面：">
                <AvatarImg
                  :imageUrl="videoForm.coverImg"
                  @success="handleAvatarSuccess"
                />
              </el-form-item>
            </el-col>
            <el-col
              v-if="videoForm.category && videoForm.category.length > 0"
              :span="18"
            >
              <el-form-item prop="label" label="标签：">
                <div
                  v-for="item in labels"
                  :key="item.id"
                  style="margin: 20px 0"
                >
                  <div v-if="item.children && item.children.length > 0">
                    <div style="float: left; margin-right: 20px">
                      {{ item.name + ":" }}
                    </div>
                    <el-checkbox-group
                      v-model="videoForm.labelList"
                      size="small"
                    >
                      <el-checkbox-button
                        v-for="label in item.children"
                        :label="label.id"
                        :key="label.id"
                        >{{ label.name }}</el-checkbox-button
                      >
                    </el-checkbox-group>
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="title" label="标题：">
                <el-input
                  :maxlength="10"
                  :minlength="1"
                  v-model="videoForm.title"
                  clearable
                  placeholder="请输入标题"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item prop="synopsis" label="简介">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 4 }"
                  placeholder="请输入内容"
                  v-model="videoForm.synopsis"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="isSingle" label="类型">
                <el-radio v-model="videoForm.isSingle" label="0">单集</el-radio>
                <el-radio v-model="videoForm.isSingle" label="1">多集</el-radio>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item prop="isRelease" label="状态">
                <el-tag
                  :type="videoForm.isRelease === '0' ? 'success' : 'danger'"
                  disable-transitions
                  >{{
                    videoForm.isRelease === "0" ? "已发布" : "未发布"
                  }}</el-tag
                >
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item>
                <el-button
                  :loading="videoAddLoading"
                  v-if="!videoForm.id"
                  type="primary"
                  @click="videoFormSubmit('0')"
                  >创建</el-button
                >
                <el-button
                  :loading="videoAddLoading"
                  v-else
                  type="primary"
                  @click="videoFormSubmit('1')"
                  >修改</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane v-if="videoForm.id" label="集数管理" name="DramaSeries">
        <DramaSeriesList
          :videoInfo="videoForm"
          @checkResource="checkCurrentResource"
        />
      </el-tab-pane>
      <el-tab-pane
        v-if="currentDramaSeries != null"
        label="资源管理"
        name="Resources"
      >
        <ResourceList :dramaSeries="currentDramaSeries" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import AvatarImg from "@/components/ImgUpload/AvatarImg";
import ResourceList from "./resourceList";
import DramaSeriesList from "./dramaSeriesList";
import { getCategoryList } from "@/api/video/category";
import { getLabelList } from "@/api/video/label";
import { addVideo, getById, updateVideo } from "@/api/video/info";
export default {
  components: { AvatarImg, ResourceList, DramaSeriesList },
  created() {
    getCategoryList().then((v) => {
      this.categoryOptions = v.data;
    });
    this.initInfo();
  },
  watch: {
    activeName(val) {
      if (val === "BaseInfo") this.initInfo();
    },
  },
  data() {
    return {
      activeName: "BaseInfo",
      categoryOptions: [],
      labels: [],
      videoAddLoading: false,
      videoUpdataLoading: false,
      currentDramaSeries: null,
      videoForm: {
        isSingle: "0",
        name: "",
        author: "",
        labels: "",
        labelList: [],
        synopsis: "",
        category: [],
        coverImg: null,
        categoryParentId: null,
        categoryId: null,
        isRelease: "1",
      },
      rules: {
        author: [{ required: true, message: "请输入作者", trigger: "blur" }],
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        synopsis: [{ required: true, message: "请填写简介", trigger: "blur" }],
        category: [
          { required: true, message: "请选择类别", trigger: "change" },
        ],
        coverImg: [
          { required: true, message: "请上传封面图片", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    checkCurrentResource(data) {
      this.currentDramaSeries = data;
      this.activeName = "Resources";
    },
    initInfo() {
      const id = this.$route.query.id;
      getById(id).then((v) => {
        if (v.code === 200) {
          const videoInfo = v.data;
          if (videoInfo) {
            this.infoChangeForm(videoInfo);
            getLabelList({ categoryId: videoInfo.categoryId }).then((v) => {
              this.labels = v.data;
              this.videoForm = videoInfo;
            });
          }
        }
      });
    },
    infoChangeForm(data) {
      data.labelList = data.labels.split(",").map(Number);
      data.category = [];
      data.category.push(data.categoryParentId);
      data.category.push(data.categoryId);
    },
    formChangeInfo(data) {
      let labels = "";
      data.labelList.forEach((item, index) => {
        if (index === data.labelList.length - 1) {
          labels = labels + item;
        } else {
          labels = labels + item + ",";
        }
      });
      data.labels = labels;
      data.categoryParentId = data.category[0];
      data.categoryId = data.category[1];
    },
    handleAvatarSuccess(url) {
      this.videoForm.coverImg = url;
    },
    categoryChange(value) {
      this.videoForm.categoryParentId = value[0];
      this.videoForm.categoryId = value[1];
      getLabelList({ categoryId: value[1] }).then((v) => {
        this.labels = v.data;
      });
    },
    callBackHeadImgs(fileList) {
      this.fileList = fileList;
    },
    saveBaseInfo() {
      this.videoAddLoading = true;
      this.formChangeInfo(this.videoForm);
      addVideo(this.videoForm)
        .then((v) => {
          if (v.code === 200) {
            this.$message({
              message: "新增成功",
              type: "success",
            });
            const videoInfo = v.data;
            this.infoChangeForm(videoInfo);
            this.videoForm = videoInfo;
            this.videoAddLoading = false;
          }
        })
        .catch(() => {
          this.videoAddLoading = false;
        });
    },
    updateBaseInfo() {
      this.videoAddLoading = true;
      this.formChangeInfo(this.videoForm);
      updateVideo(this.videoForm)
        .then((v) => {
          if (v.code === 200) {
            this.$message({
              message: "更新成功",
              type: "success",
            });
            this.videoAddLoading = false;
          }
        })
        .catch(() => {
          this.videoAddLoading = false;
        });
    },
    videoFormSubmit(type) {
      this.$refs["videoForm"].validate((valid) => {
        if (valid) {
          if (type === "0") {
            this.saveBaseInfo();
          } else if (type === "1") {
            this.updateBaseInfo();
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>